import Header from "../../../../components/Header";
import './index.scss'
import {ImageViewer, Tabs} from "antd-mobile";
import {useParams} from "react-router-dom";
import {regionDetail} from "../../../../api/api";
import {SyntheticEvent, useEffect, useRef, useState} from "react";

const RegionDetail = () => {
    const {id} = useParams();
    const [data, setData] = useState<any>({});
    const [videos, setVideos] = useState<Array<{ id: string, path: string }>>([]);
    const [images, setImages] = useState<Array<{ id: string, path: string }>>([]);
    // 预览
    const [visiBleImages, setVisiBleImages] = useState<Array<string>>([]);
    // 获取元素
    const divEle = useRef<HTMLDivElement | null>(null);
    // 预览
    const [visible, setVisible] = useState(false)
    const getData = () => {
        regionDetail(id as string).then(r => {
            r = {
                ...r,
                content: r.content.replaceAll('<img', '<img style="width:100%;height:auto;display:block;margin:0 auto" ')
            }
            setData(r);
            setVisiBleImages(r.images.map((v: { path: string }) => v.path))
            const videos = r.videos.map((v: { path: string }) => {
                return {
                    id: v.path,
                    path: v.path
                }
            });
            const images = r.images.map((v: { path: string }) => {
                return {
                    id: v.path,
                    path: v.path
                }
            });
            setVideos(videos);
            setImages(images)
        })
    };

    useEffect(() => {
        getData();
    }, []);

    // 播放
    const play = (e: SyntheticEvent<HTMLVideoElement>) => {
        if (divEle) {
            const current: HTMLVideoElement | any = e.target;
            const videoList: any = divEle.current?.children;
            for (const v of videoList) {
                if (v === current) {
                    v.play();
                } else {
                    v.pause();
                }
            }
        }
    }
    return (
        <div className="region-detail-box">
            <Header title={data.name}/>
            <div>
                <Tabs>
                    <Tabs.Tab title='图片' key='images'>
                        <div className="region-detail-list">
                            {
                                images.map((v, index) => {
                                    return (
                                        <img src={v.path} key={index} onClick={() => setVisible(true)} alt=""/>
                                    )
                                })
                            }
                        </div>
                    </Tabs.Tab>
                    <Tabs.Tab title='视频' key='videos'>
                        <div className="region-detail-list" ref={divEle}>
                            {
                                videos.map((v, index) => {
                                    return (
                                        <video controls src={v.path} key={index} onPlay={(e) => play(e)}/>
                                    )
                                })
                            }
                        </div>
                    </Tabs.Tab>
                    <Tabs.Tab title='介绍' key='content'>
                        <div dangerouslySetInnerHTML={{__html: data?.content ?? ''}}></div>
                    </Tabs.Tab>
                </Tabs>
            </div>
            <ImageViewer.Multi
                images={visiBleImages}
                visible={visible}
                defaultIndex={1}
                onClose={() => {
                    setVisible(false)
                }}
            />
        </div>
    )
}

export default RegionDetail